<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>考勤系统后台</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />    
    
    <link href="${pageContext.request.contextPath }/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
    
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/dist/css/font-awesome.css" rel="stylesheet" />
    
    <link href="${pageContext.request.contextPath }/dist/css/adminia.css" rel="stylesheet" /> 
    <link href="${pageContext.request.contextPath }/dist/css/adminia-responsive.css" rel="stylesheet" /> 
    
    <link href="${pageContext.request.contextPath }/dist/css/pages/dashboard.css" rel="stylesheet" /> 
    

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  	#video{
  			border-radius:100%;
  		}
  		#canvas{
  			border-radius:100%;
  			display:none;
  		}
  </style>
  </head>

<body>
	
<div class="navbar navbar-fixed-top">
	
	<div class="navbar-inner">
		
		<div class="container">
			
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 				
			</a>
			
			<a class="brand" >考勤系统</a>
			
			<div class="nav-collapse">
			
				<ul class="nav pull-right">
					<li>
						<a href="#"><span class="badge badge-warning">7</span></a>
					</li>
					
					<li class="divider-vertical"></li>
					
					<li class="dropdown">
						
						<a data-toggle="dropdown" class="dropdown-toggle " href="#">
							${sessionScope.admin.adminName} <b class="caret"></b>							
						</a>
						
						<ul class="dropdown-menu">
							<li>
								<a href="#"><i class="icon-user"></i> 账户设置 </a>
							</li>
							
							<li><a href=""  data-toggle="modal" data-target="#change_admin_pwd"><i class="icon-lock"></i> 修改密码</a></li>
							
							<li class="divider"></li>
							
							<li>
								<a href="${pageContext.request.contextPath }/AdminController?op=adminQuit"><i class="icon-off"></i>退出</a>
							</li>
						</ul>
					</li>
				</ul>
				
			</div> <!-- /nav-collapse -->
			
		</div> <!-- /container -->
		
	</div> <!-- /navbar-inner -->
	
</div> <!-- /navbar -->




<div id="content">
	
	<div class="container">
		
		<div class="row">
			
			<div class="span3">
				
				<div class="account-container">
				
					<div class="account-avatar">
						<c:if test="${sessionScope.admin.adminAvatarAddr != null }">
									<a  data-toggle="modal" data-target="#updPic"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=${sessionScope.admin.adminAvatarAddr}" alt="" class="thumbnail" id="adImg" ></a>
								</c:if>
								<c:if test="${sessionScope.admin.adminAvatarAddr == null }">
										<a  data-toggle="modal" data-target="#updPic"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=labi.jpg" alt="" class="thumbnail" id="adImg"  ></a>
								</c:if>
					</div> <!-- /account-avatar -->
				
					<div class="account-details">
					
						<span class="account-name">${sessionScope.admin.adminName}</span>
						
						<span class="account-role">${sessionScope.admin.adminId}号管理员</span>
						
						<span class="account-actions">
							<a href="javascript:;">个人资料</a> |
							
							<a href="javascript:;">账户管理</a>
						</span>
					
					</div> <!-- /account-details -->
				
				</div> <!-- /account-container -->
				
				<hr />
				
				<ul id="main-nav" class="nav nav-tabs nav-stacked">
					
					<li >
						<a href="${pageContext.request.contextPath }/Admin/Index.jsp">
							<i class="icon-home"></i>
							回主页
						</a>
					</li>
					
					<li>
						<a href="${pageContext.request.contextPath }/Admin/leaveApproval.jsp">
							<i class="icon-th-list"></i>
							请假审批
						</a>
					</li>
					
					<li>
						<a href="${pageContext.request.contextPath }/Admin/kaoqgl.jsp">
							<i class="icon-signal"></i>
							考勤管理	
						</a>
					</li>
					
					<li class="active">
						<a href="${pageContext.request.contextPath }/Admin/yuanggl.jsp">
							<i class="icon-user"></i>
							员工管理							
						</a>
					</li>
					
					<li>
						<a href="${pageContext.request.contextPath }/Admin/regAdmin.jsp">
							<i class="icon-user"></i>
							账户管理
						</a>
					</li>
				</ul>							
				<hr />
			<form action=""  >	 	 	 
	  	 		<h5 style="font-size: 15px;">	  	 		
				<span>工&nbsp;号</span> 
				<input type="text" id="empId1" value="" name="" placeholder="工号"  style="width:80px;height:18px;"/>
				<span >&nbsp;&nbsp;&nbsp;&nbsp;姓&nbsp;名</span> 				
				<input type="text" id="empName1" value="" name="" placeholder="姓名" style="width:70px;height:18px;"/>
				<br/>
				<span >部&nbsp;门</span> 
					
				<select  id="deptNames1" style="width:90px;height:28px;">
					<option value=""></option>
									
				</select>		
				<span>&nbsp;&nbsp;&nbsp;&nbsp;状&nbsp;态</span>
				<select  id="empStatus1" style="width:80px;height:28px;">
					<option value=""></option>
					<option value="在职">在职</option>					
					<option value="离职">离职</option>				
				</select>
				<br/>
				<span>起&nbsp;始&nbsp;时&nbsp;间</span> &nbsp;&nbsp;		
				<input type="date" name="data" id="hireDate1" value="" style="width:166px;height:18px;"/>
				 <br/><span>结&nbsp;束&nbsp;时&nbsp;间</span>&nbsp;&nbsp;&nbsp;
				<input type="date" name="data" id="hireDate2" value="" style="width:166px;height:18px;"/>
				<br/>					
				<button type="button" class="btn btn-default" id="querys" style="width:200px;height:30px;">查&nbsp;&nbsp;询</button>
					&nbsp;&nbsp;
				<button type="reset" class="btn btn-success" style="width:50px;height:30px;">清&nbsp;&nbsp;除</button>	
			</h5>
			<hr />					
			</form>	
			
			</div> <!-- /span3 -->
						 				
			<div class="span9">				
				<h2 class="">
					<i class="icon-th-large"></i>
					员工管理																								
				</h2>
		 		<hr />	
	  	 						
          <div class="table-responsive"  style="height:550px">        
            <table class="table table-striped">
              <thead>
                <tr style="font-size: 15px;">
                  <th>工号</th>
                  <th>姓名</th>
                  <th>部门</th>                  
                  <th>密码</th>
                  <th>电话</th>
                  <th>入职时间</th>
                  <th>状态</th>
                  <th>操作</th>                                 
                </tr>
              </thead>
              <tbody id="tbodys">
							
			       <%-- <tr>
			         <td>80001</td>
			         <td>333</td>
			         <td>设计部</td>
			         <td>5555</td>
			         <td>1865555555</td>
			         <td>2020.11.02</td>
			         <td>在职</td>           
			         <td><a href="" data-toggle="modal" data-target="#myModal"
			         	 onclick="modifyFun(this)">
			            <button class="btn btn-success">修改</button></a>
			            <a href="javascript:delFun(${article.articleId}) " ><button class="btn btn-danger" >删除</button></a></td>
			       </tr>     --%>     
			  
              </tbody>            
            </table>
           <div>          	           			
          		<span style="font-size: 20px;">&nbsp;&nbsp;&nbsp;&nbsp; 每页<select name="" class="scarss"  style="width:50px;height:32px;margin-bottom:10px;">
          			<option value="5">5</option>			
    			 	<option value="3">3</option>
    			 	<option value="10">10</option>
    			</select>条
    			</span>
    				<span class="pagination" id="pageItem"  style="font-size: 15px;">	    										
				</span> 
				
				<a href="" data-toggle="modal" data-target="#myModal2">
				<button class="btn btn-success" id="addz" style="width:95px;height:32px;margin-bottom:18px;float:right;margin-right:80px;">添&nbsp;&nbsp;加&nbsp;&nbsp;员&nbsp;&nbsp;工
				</button></a>		
				<br/>
										
    		</div>   		   			 	
    		<div style="text-align:right;font-size: 16px;">
    		<!-- 分页信息 -->
				<span id="showPageInfo" ></span>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;									
    		</div>  
          </div>      
      </div>
    </div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	<form class="form-horizontal" role="form">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改记录
				</h4>
			</div>
			<div class="modal-body">
				
					<div class="form-group" >
						<label for="empId" class="col-sm-2 control-label">工号</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="text" class="form-control" id="empId" name="empId" readonly="readonly" />
						</div>
					</div>
					<div class="form-group">
						<label for="empName" class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="text" class="form-control" id="empName" name="empName"/>
						</div>
					</div>
					<div class="form-group">
						<label for="deptName" class="col-sm-2 control-label">部门</label>
						<div class="col-sm-8" style="height:35px;">											
							<select  id="deptName" name="deptName">								
																					
							</select>
						</div>
					</div>					
					<div class="form-group">
						<label for="empPwd" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="text" class="form-control" id="empPwd" name="empPwd"/>
						</div>
					</div>
					<div class="form-group">
						<label for="empPhone" class="col-sm-2 control-label">电话</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="text" class="form-control" id="empPhone" name="empPhone"/>
						</div>
					</div>
					
					<div class="form-group">
						<label for="hireDate" class="col-sm-2 control-label">入职时间</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="date" name="hireDate" id="hireDate" value="" />
						</div>
					</div>
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" id="modif">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal -->
</div>
	
	
	<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					添加员工
				</h4>
			</div>
		<form id="addEmpForm" class="form-horizontal" role="form" method="post" enctype="multipart/form-data">
			<div class="modal-body">
			
					<div class="form-group" >
						<label for="empPicture" class="col-sm-2 control-label">头像</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="file" class="form-control" id="empPicture" name="empPicture" accept="image/gif,image/jpeg,image/jpg,image/png"/>
						</div>
					</div>			
					<div class="form-group">
						<label for="empName2" class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="text" class="form-control" id="empName2" name="empName2"/>
						</div>
					</div>
					<div class="form-group">
						<label for="deptName2" class="col-sm-2 control-label">部门</label>
						<div class="col-sm-8" style="height:35px;">							
							<select  id="deptName2" name="deptName2">								
																					
							</select>
						</div>
					</div>
				
					<div class="form-group">
						<label for="empPwd2" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="text" class="form-control" id="empPwd2" name="empPwd2"/>
						</div>
					</div>
					<div class="form-group">
						<label for="empPhone2" class="col-sm-2 control-label">电话</label>
						<div class="col-sm-8" style="height:35px;">
							<input type="text" class="form-control" id="empPhone2" name="empPhone2"/>
						</div>
					</div>	
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
				<!-- <button type="button" class="btn btn-primary">
					添加头像
				</button> -->
				<button type="button" class="btn btn-primary" id="adds">
					添加更新
				</button>
			</div>
		</form>
		</div><!-- /.modal-content -->
		
	</div><!-- /.modal -->
	</div>	
	</div>	
<!-- 人脸注册模态框 -->
<div class="modal fade" id="faceReg">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">人脸注册</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
	   <video id="video" width="400" height="320" ></video>
  		<canvas id="canvas" width="400" height="320"></canvas>
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" id="capture" class="btn btn-primary" >拍照</button>
      </div>
 
    </div>
  </div>
</div>

<!-- 修改密码的模态框 -->
	<div class="modal fade" id="change_admin_pwd" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<form class="form-horizontal" role="form" >
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">

						<div class="form-group">
							<label for="previousPwd" class="col-sm-2 control-label">原密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="previousPwd"
									name="previousPwd"  />
							</div>
						</div>
						<!-- <div class="form-group">
							<label for="previousRePwd" class="col-sm-2 control-label">再次输入</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="previousRePwd"
									name="previousRePwd" />
							</div>
						</div> -->
						<div class="form-group">
							<label for="newPwd" class="col-sm-2 control-label">新密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="newPwd"
									name="newPwd" />
							</div>
						</div>

						<div class="form-group">
							<label for="newRePwd" class="col-sm-2 control-label">确认输入</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="newRePwd"
									name="newRePwd" />
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" id="updateBtn">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</form>
		</div>
		<!-- /.modal -->
	</div>
<!-- 修改头像模态框 -->
    <div class="modal fade" id="updPic">
		<div class="modal-dialog">
			<div class="modal-content" >
		
				<!-- 模态框头部 -->
				<div class="modal-header">
					<h4 class="modal-title">修改头像</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
			 <form id="updatePicForm" enctype="multipart/form-data" method="post">
				<!-- 模态框主体 -->
				<div class="modal-body">
				<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" name="ep" />
				</div>
			</form>
			
				<!-- 模态框底部 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-success" id="btup">确认修改</button>
				</div>
				
			
			</div>
		</div>
	</div>
  </body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script>
     $(function(){ 		
    	 $("#btup").click(function(){
				var formData = new FormData($("#updatePicForm")[0]);
				$.ajax({
					async : true,
					url : "${pageContext.request.contextPath}/AdminController?op=updatePic",
					type : "POST",
					data : formData,
					contentType : false,
					processData : false,
					success : function(admin) {
						var path = admin.adminAvatarAddr;
						$("#updPic").modal('hide');
						$("#adImg").attr("src","${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName="+path+"&a=" + new Date().getTime());
					},
					error : function() {
						alert("异步请求失败");
					}
				})
			})
	     //进页面显示
    	vagueds(1);
    	//每页显示n条
    	$(".scarss").blur(function(){
    		queryst(1);	
     	})
     	//跳转页面
   		 $(document).on("click","#tiao",function(){
   			var pageNo=$("#yema").val();
   			var totalPage=$("#totalPage").text();
   			if(pageNo<1){
   				pageNo=1;
   				$("#yema").val(pageNo);
   			}else if(pageNo>totalPage*1){
   				pageNo=totalPage;
   				$("#yema").val(pageNo);
   			}
   			queryst(pageNo);	
   		})  
     	//首页
   		$(document).on("click",".sy",function(){ 		    			
   			queryst(1);	
   		})
   		//末页
   		$(document).on("click",".my",function(){
   			queryst($("#totalPage").text());	
   		}) 
   		//上一页
   		$(document).on("click",".syy",function(){
   			queryst(parseInt($("#pageNo").text())-1);	
   		})
   		//下一页
   		$(document).on("click",".xyy",function(){
   			queryst(parseInt($("#pageNo").text())+1);	
   		})
   		//当前页
   		$(document).on("click",".dqy",function(){
   			queryst($(this).text());	
   		})
   		//按多条件查询  员工信息		
   		$("#querys").click(function(){
   			queryst(1)
   			
     	})
     	
     	//对模态框添加员工部门选项做遍历显示
     	$(document).on("click","#addz",function(){
			$("#myModal2 #deptName2").empty(); 
     		$.get("${pageContext.request.contextPath}/StaffsController",{op:"dept"},function(datao){
    			 $.each(datao,function(index,dep){
    				 $("#myModal2 #deptName2").append('<option value="'+dep.deptName+'">'+dep.deptName+'</option>');
    			 })
     		    		
 			},"json") 
     	})
     	//对模态框修改员工部门选项做遍历显示
     	$(document).on("click",".modifss",function(){    
     		$("#myModal #deptName").empty(); 
     		var deptName=$("#dn").text();
     		
     		 $("#myModal #deptName").append('<option value="'+deptName+'">'+deptName+'</option>');
     		$.get("${pageContext.request.contextPath}/StaffsController",{op:"dept"},function(datao){    			
    			 $.each(datao,function(index,dep){
    				 if(dep.deptName!=deptName){
    					 $("#myModal #deptName").append('<option value="'+dep.deptName+'">'+dep.deptName+'</option>');
    				 }
    			 })
     		    		
 			},"json") 
 			vagueds($("#pageNo").text());
     	})
   		//添加
   		$("#adds").click(function(){
   			var formData = new FormData($("#addEmpForm")[0]);
   			$.ajax({
				async : true,
				url : "${pageContext.request.contextPath}/StaffsController?op=add",
				type : "POST",
				data : formData,
				contentType : false,
				processData : false,
				success : function(result) {
					$("#faceReg").modal('show');
				},
				error : function() {
					alert("添加失败,请重试~~");
				}
			})
   		})
   		//修改员工
   			$(document).on("click","#modif",function(){      			
	    		var employees={
	    				empId:$("#myModal #empId").val(),
			     	  	empName:$("#myModal #empName").val(),		     	  	
			     	   	empPwd:$("#myModal #empPwd").val(),
			     	   	empPhone:$("#myModal #empPhone").val(),  
			     	   	hireDate:$("#myModal #hireDate").val(),
			     	  	empStatus:$("#myModal #empStatus").val()=="在职"?1:0		     	  					     	  			     	
	    		};	    		
	    		 $.get("${pageContext.request.contextPath}/StaffsController",{op:"modif",deptName:$("#myModal #deptName").val(),employees:JSON.stringify(employees)},function(datas){
	 				if(datas){
	 					$("#myModal").modal('hide');
	 					vagueds($("#pageNo").text());
	 				}else{
	 					alert("添加失败！")
	 				}
	     		    		
	 			},"json") 	   
    	       
   			})
     })
         //按多条件查询显示信息
     function queryst(pageNo){
    	 var empId1=$("#empId1").val();
			if(""==empId1){
				empId1=0;
			}
			var empName1=$("#empName1").val();
			var deptName1=$("#deptNames1").val();
			var empStatus1=$("#empStatus1").val();
			
			 if("在职"==empStatus1){
				empStatus1=1;
			}else if("离职"==empStatus1){
				empStatus1=0;
			}else{
				empStatus1=88;
			} 
			var hireDate1=$("#hireDate1").val();
			var hireDate2=$("#hireDate2").val();   

		 $.post("${pageContext.request.contextPath}/StaffsController",{op:"que",
   		  pageNo:pageNo,
   		  pageSize:$(".scarss").val(),
   		  empId1:empId1,
   		  empName1:empName1,
   		  deptName1:deptName1,
   		  empStatus1:empStatus1,
   		  hireDate1:hireDate1,
   		  hireDate2:hireDate2},function(datas){     	
   				vaguesf(datas);					  													  				
			},"json").error(function(){
				alert("请输入正确的查询条件！")
			})	
			
     }
		//显示所有员工信息
     function vagueds(pageNo){
   	  $.get("${pageContext.request.contextPath}/StaffsController",{op:"vaguesd",
   		  pageNo:pageNo,pageSize:$(".scarss").val()},function(datas){
				vaguesf(datas);		
			},"json") 
   	/*  $.get("${pageContext.request.contextPath}/StaffsController",{op:"vaguesf"},function(datas){
				vaguesf(datas);		
			},"json")  */
			//对查询添加员工部门选项做遍历显示
	     	 $("#deptNames1").empty();	
			$.get("${pageContext.request.contextPath}/StaffsController",{op:"dept"},function(datao){
				$("#deptNames1").append('<option value=""></option>');
   			 $.each(datao,function(index,dep){
   				 $("#deptNames1").append('<option value="'+dep.deptName+'">'+dep.deptName+'</option>');
   			 })
			},"json") 
    }  
     //显示员工信息
 	 function vaguesf(datas){  		
    	 $("#tbodys").empty();  
    	 $("#pageItem").empty();
 		 $("#showPageInfo").empty();		
    	 var pageNo=datas.pageNo;
    	 var totalPage=datas.totalPage;
    	 var pageSize=datas.pageSize;
    	 var totalCount=datas.totalCount;
    	 $.each(datas.data,function(index,emp){
    		// $.each(datas.,function(index,emp){ 
    		 
    		 var empId=emp.empId;
    		 var empName=emp.empName;
    		 var deptName=emp.dept.deptName;
    		 var empPwd=emp.empPwd;
    		 var empPhone=emp.empPhone;
    		 var hireDate=emp.hireDate.substring(0, emp.hireDate.length-11);
    		 var empStatus;
    		 if(emp.empStatus==0){
    			 empStatus="离职";
    		 }else{
    			 empStatus="在职";
    		 }   		
    			addTableDatas(empId,empName,deptName,empPwd,empPhone,hireDate,empStatus);   			
    					    		     		
    	 })
     		addPaging(pageNo,totalPage,pageSize,totalCount);
    }
 	function addPaging(pageNo,totalPage,pageSize,totalCount){
    	//显示分页信息
     	
 		$("#showPageInfo").append("当前第<span id='pageNo'>"+pageNo+"</span>页/共<span id='totalPage'>"+totalPage+
 				                  "</span>页/每页显示<span id='pageSize'>"+pageSize+"</span>条/共<span id='totalCount'>"+totalCount+"</span>条数据");

 	   //首页
 	   if(1==pageNo){
 		   $("#pageItem").append('<li id="sy" class="disabled"><a href="#">首页</a></li>');
 	   }else{
 		   $("#pageItem").append('<li class="sy"><a href="#">首页</a></li>');
 	   }
 	  //上一页
 	   if(1==pageNo){
 		   $("#pageItem").append('<li class="disabled"><a href="#">上一页</a></li>');
 	   }else{
 		   $("#pageItem").append('<li class="syy"><a href="#">上一页</a></li>');
 	   }
 	   //显示分页栏目
 	   for(var i=1;i<=totalPage;i++){
 		   
 		    if(i==pageNo){
 			   $("#pageItem").append('<li class="active"><a href="#">'+i+'</a></li>');
 		   }else{			  
 				 if(i==pageNo-1 || i==pageNo+1 || i==pageNo+2){
 					$("#pageItem").append('<li class="dqy"><a href="#">'+i+'</a></li>');  
 				} 			 			 
 		   } 
 	   }
 	   //下一页
 	   if(pageNo==totalPage){
 		   $("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
 	   }else{
 		   $("#pageItem").append('<li class="xyy"><a href="#">下一页</a></li>');
 	   }
 	   //末页
 	   if(pageNo==totalPage){
 		   $("#pageItem").append('<li id="my" class="disabled"><a href="#">末页</a></li>');
 	   }else{
 		   $("#pageItem").append('<li class="my"><a href="#" >末页</a></li>');
 	   }
 	   //跳转页
 	    $("#pageItem").append('<li><a href="#"><input type="number" id="yema" value="'+pageNo+'" min="1" max="'+totalPage+
 	    		'" style="width:35px;height:15px;margin:0px"/></a></li>');
 	    $("#pageItem").append('<li><a href="#" id="tiao">跳转</a></li>');
 	}
    	 //显示员工信息表格
 	function addTableDatas(empId,empName,deptName,empPwd,empPhone,hireDate,empStatus){
 		var html=null;	 
    	if(empStatus=="在职"){
    	 html= '<td><a href="" data-toggle="modal" data-target="#myModal"'+
        'data-empid="'+empId+'"'+
        'data-empname="'+empName+'"'+
        'data-deptname="'+deptName+'"'+
        'data-emppwd="'+empPwd+'"'+
        'data-empphone="'+empPhone+'"'+
        'data-hiredate="'+hireDate+'"'+
        'data-empstatus="'+empStatus+'"'+		         
        	 'onclick="modifyFun(this)">'+
           '<button class="btn btn-success modifss" id="modifss">修改</button></a>'+
           '<a href="javascript:delFun('+empId+') " ><button class="btn btn-danger " >删除</button></a></td>';	 
    	}
    	if(empStatus=="离职"){
       	 html= '<td><button class="btn btn-success disabled">修改</button></a>'+
            '<button class="btn btn-danger disabled" >删除</button></td>';	 
       	}
 	  	 
 		 $("#tbodys").append('<tr>'+
	  	         '<td>'+empId+'</td>'+
		         '<td>'+empName+'</td>'+
		         '<td id="dn">'+deptName+'</td>'+
		         '<td>'+empPwd+'</td>'+
		         '<td>'+empPhone+'</td>'+
		         '<td>'+hireDate+'</td>'+
		         '<td>'+empStatus+'</td>'+html+
		       '</tr> ');
     }
 	

    function delFun(empId){
    	//删除员工  
 	   var flag=confirm("是否确定删除员工编号为:"+empId);
 	   if(flag){
 		   //跳转页面
 		 $.get("${pageContext.request.contextPath}/StaffsController",{op:"dels",empId:empId},function(datas){
				if(datas){
					vagueds($("#pageNo").text());					
				}else{
					alert("删除失败！")
				}
			},"json")
 	   }
 	  }
     function modifyFun(obj){    	
 	   	var empId=$(obj).data("empid");
 	   	var empName=$(obj).data("empname");
 	  	var empPwd=$(obj).data("emppwd");
 	  	var empPhone=$(obj).data("empphone");
 	 	var hireDate=$(obj).data("hiredate");
 		var empStatus=$(obj).data("empstatus");
 	   	$("#myModal #empId").val(empId);
 	  	$("#myModal #empName").val(empName);
 	  	$("#myModal #empPwd").val(empPwd);
 	 	$("#myModal #empPhone").val(empPhone);
 		$("#myModal #hireDate").val(hireDate);
 		$("#myModal #empStatus").val(empStatus);
    }    
     //调用摄像头
     //访问用户媒体设备的兼容方法
     function getUserMedia(constraints, success, error) {
       if (navigator.mediaDevices.getUserMedia) {
         //最新的标准API
         navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
       } else if (navigator.webkitGetUserMedia) {
         //webkit核心浏览器
         navigator.webkitGetUserMedia(constraints,success, error)
       } else if (navigator.mozGetUserMedia) {
         //firfox浏览器
         navigator.mozGetUserMedia(constraints, success, error);
       } else if (navigator.getUserMedia) {
         //旧版API
         navigator.getUserMedia(constraints, success, error);
       }
     }

     let video = document.getElementById('video');
      //根据id获取画布标签
     let canvas = document.getElementById('canvas');
     //创建画布对象
     let context = canvas.getContext('2d');
     
     function success(stream) {
       //兼容webkit核心浏览器
       let CompatibleURL = window.URL || window.webkitURL;
       //将视频流设置为video元素的源
       console.log(stream);

       //video.src = CompatibleURL.createObjectURL(stream);
       video.srcObject = stream;
       video.play();
     }

     function error(error) {
       console.log('访问用户媒体设备失败${error.name}, ${error.message}');
     }

     if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
       //调用用户媒体设备, 访问摄像头  成功的话  调用success函数   否则回调error函数
       getUserMedia({video : {width: 400, height: 320}}, success, error);
     } else {
       alert('不支持访问用户媒体');
     }
     $(function(){
    	 $('#capture').click(function(){
	     	context.drawImage(video, 0, 0, 400, 320);
	     	$.post("${pageContext.request.contextPath}/FaceController",{image:context.canvas.toDataURL('image/png'),op:"register",empName:$("#empName2").val(),empPwd:$("#empPwd2").val()},function(message){
	     	      if(message.search("成功") != -1){
	     	   		 $("#faceReg").modal('hide');
	     	   		 $("#myModal2").modal('hide');
	     	   		vagueds($("#pageNo").text());
	     	   	  }else{
	     	   		  console.log(message);
	     	   	  }
	          })
	     })
	    
     })
     
     
     $(function(){
		//点击事件触发模态框
		$("#updateBtn").click(function(){
			var	previousPwd=$("#previousPwd").val();
			var	newPwd=$("#newPwd").val();
			var	newRePwd=$("#newRePwd").val();
		
			
		if(newPwd==newRePwd){
			//发送Ajax请求修改密码
			$.get("${pageContext.request.contextPath }/AdminController",{op:"change_admin_pwd",previousPwd:previousPwd,newPwd:newPwd,adminName:"${sessionScope.admin.adminName}"},function(flag){
				if(flag){
					//关闭模态框后并刷新数据
					$("#change_admin_pwd").modal('hide');
					//
				}else{
					alert("账户密码错误,修改失败!")
				}
			},"json")
		}else{
			alert("两次密码不一致");
		}
		
		})
	})
   </script>
</html>
